<template>
  <!--
    时间：2020年4月3日11:30:27
    模块：路由入口 + 左侧导航 + 顶部导航
   -->
  <div class="div_main">
    <!-- 顶部banner -->
    <el-row>
      <el-col :span="24">
        <div class="div_banner">
          <!-- 顶部左侧（logo 和 标题） -->
          <div class="div_banner_left">
           <!-- <img src="../../build/logo.png" class="img_logo"/> -->
           <span>新仓镇连心码后台管理系统</span>
          </div>

          <!-- 顶部右侧 （基本操作栏 和 头像） -->
          <div class="div_banner_right">

           <el-menu class="el_menu_banner" mode="horizontal" @select="handleSelect"
           background-color="#76c7ff"
           text-color="#fff"
           active-text-color="#fff">
             <el-submenu index="1">
               <template slot="title">超级管理员</template>
               <el-menu-item index="1-1">选项1</el-menu-item>
               <el-menu-item index="1-2">选项2</el-menu-item>
               <el-menu-item index="1-3">选项3</el-menu-item>
             </el-submenu>
           </el-menu>
           <img src="../assets/img/defaultHeadImg.jpg" class="img_head"/>

          </div>

        </div>
      </el-col>
    </el-row>

    <!-- 左侧导航 -->
    <el-row class="tac">
      <el-col :span="3">
        <el-menu
          default-active="chanfeijianguan"
          class="el-menu-vertical-demo"
          @select="leftNavSelect">

          <el-menu-item index="homePage">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-unfold"></i>
              <span>功能模块</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="minshengzoufang">民生走访</el-menu-item>
              <el-menu-item index="1-2">环境卫生</el-menu-item>
            </el-menu-item-group>
            </el-submenu>

        </el-menu>
      </el-col>

      <el-col :span="21">
        <el-scrollbar class="div_router_view" :native="false">
          <router-view></router-view>
      </el-scrollbar>


      </el-col>

      </el-row>
  </div>
</template>

<script>
 export default {
  data () {
    return {
      activeIndex: '1',
    }
  },
  components: {

  },
  mounted () {
    this.$router.push({name:"homePage"});
  },
    methods: {
       handleSelect(key, keyPath) {
              console.log(key, keyPath);
            },
      leftNavSelect(index, indexPath) {
        if(index){
          console.log(index);
          this.$router.push({name:index});
        }
      },
    }
  }
</script>

<style lang="less" scoped="scoped">
  .div_main{
  background-color: white;
  height: 100vh;
  .div_router_view{
    width: 100%;
    box-sizing: border-box;
    height: 92vh;
    background-color: #f0f0f0;
    padding: 0 20px;
  }

  //顶部导航
  .div_banner{
    height: 8vh;
    color: #fff;
    background-image: linear-gradient(to right, #4b94ff , #7dd0ff);
    .div_banner_left{
      height: 100%;
      float: left;
      padding-left: 20px;
      display: flex;
      align-items: center;
      .img_logo{
        width: 50px;
      }
      span{
        line-height: 80px;
        font-size: 28px;
        font-family: "黑体";
        font-weight: bold;
        letter-spacing: 3px;
        padding-left: 20px;
      }
    }

    .div_banner_right{
      height: 100%;
      float: right;
      padding-right: 30px;
      display: flex;
      align-items: center;
      .img_head{
        width: 40px;
        height: 40px;
        border-radius: 30px;
        margin-left: 20px;
        cursor: pointer;
      }

    }
  }
  }
  .el-menu {
      border:none;
  }
  /deep/.el-menu--horizontal>.el-submenu .el-submenu__title {
      height: 80px;
      line-height: 80px;
      font-size: 15px;
      font-weight: bold;
      letter-spacing: 1px;
  }
  /deep/.el-submenu.is-active .el-submenu__title {
      border: none;
  }


</style>
<style>
  .el-scrollbar__wrap {
     overflow-x: hidden;
   }
</style>
